Dom 相关Js

2019.2.12 星期二

1. 获取select选择option this.selectedIndex; this.selectedOptions[0]

   获取图片的元素宽高

   需要等img加载完成后才可以获取到，否则第一次是空。除非，有缓存或者加载图片比js执行快
   # js获取图片信息（一）—–获取图片的原始尺寸

   var img = document.getElementById("oImg"), w,h;
   if (oImg.naturalWidth) {
   　　// HTML5 browsers
   　　w = oImg.naturalWidth;
   　　h = oImg.naturalHeight;
   } else {// IE 6/7/8
   　　var nImg = new Image();
   //      nImg.src = oImg.src;
   　　nImg.onload = function () {
   　　　　w = nImg.width;
   　　　　h = nImg.height;
   　　　　console.log(w + "  " + h)
   　　}
   　　nImg.src = oImg.src;
   }

2. 标准浏览器使用document.documentElement，低版本IE使用document.body

3. 原生方式事件代理bind，父元素绑定

4. 事件绑定once实现
5. ready：DOMContendLoaded . onload:window,img

   a标签click和href

6. a标签click，href先后顺序
   “a标签onclick事件会在href属性生效前优先执行！”！
   解决方法: 在onclick事件上做个setTimeout的短暂延时，使得onclick里面的事件因延时,在地址栏网址被修改后再去捕捉最新的地址栏链接！
   [详解Html a标签中href和onclick用法、区别、优先级别
   Html A标签中 href 和 onclick 同时使用的问题 优先级别
   1 顺序
   ie 6 : href 先触发 onclick 后触发
   其他浏览器 先触发onlick 后触发 href
   2 href="javascript: xxx()"
   不能传入this作为参数
   onclick可以
   3 优先触发的方法如果返回 false 导致后一个事件不被触发
   6 总结：
   1) 在不需要传递this作为方法的参数时候，推荐
   只使用href=”JavaScript: “
   2) 如果需要使用this参数，推荐
   代码如下
   <a href="javascript:void(0);" onclick="doSomthing(this)" >

html中a标签href属性的一个坑
此URL后边有一个name参数，只不过参数的值竟然带了空格，这样的链接，直接用android浏览器访问，是没有问题的，但用ios的浏览器访问，这就是一个错误的URL，会报错的！

所以，我们会想到编码，name参数的值，可以用encodeURIComponent()方法进行编码，然后再拼接到URL上，这样就安全了（encodeURIComponent是js原生方法，直接用即可）。

由此可见：“万恶”的href属性，在调用openURL传参时自动解码，而onclick属性则保持参数原封不动。

因此，小菜强烈不推荐使用a标签的href属性调用js，onclick方法非常的科学，非常的稳定，非常的正确，href的本意就是用来跳转URL，就不要用它来执行js啦。其实更好的做法是绑定事件，那样代码更好管理，看起来也整洁。

dom元宽高

4. javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下：
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：
元素的实际高度：document.getElementById(“div”).offsetHeight
元素的实际宽度：document.getElementById(“div”).offsetWidth
元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft
元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop

滚动顶部判断

5. 滚动到顶部。滚动条在Y轴上的滚动距离，文档的总高度,浏览器视口的高度
   $BLOB: 滚动条操作25## ## 判断div是否滚动到底部
   # [判断滚动条到底部的JS代码]

   //滚动条在Y轴上的滚动距离
   function getScrollTop(){
   　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
   　　if(document.body){
   　　　　bodyScrollTop = document.body.scrollTop;
   　　}
   　　if(document.documentElement){
   　　　　documentScrollTop = document.documentElement.scrollTop;
   　　}
   　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
   　　return scrollTop;
   }
   
   //文档的总高度
   function getScrollHeight(){
   　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
   　　if(document.body){
   　　　　bodyScrollHeight = document.body.scrollHeight;
   　　}
   　　if(document.documentElement){
   　　　　documentScrollHeight = document.documentElement.scrollHeight;
   　　}
   　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
   　　return scrollHeight;
   }
   
   //浏览器视口的高度
   function getWindowHeight(){
   　　var windowHeight = 0;
   　　if(document.compatMode == "CSS1Compat"){
   　　　　windowHeight = document.documentElement.clientHeight;
   　　}else{
   　　　　windowHeight = document.body.clientHeight;
   　　}
   　　return windowHeight;
   }
   
   window.onscroll = function(){
   　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
   　　　　alert("you are in the bottom!");
   　　}
   };

6. 移动端JS判断手势方向

当出现滚动时候，获取y轴距离的时候要加上滚动高度，不然高度差一直是0
[移动端JS判断手势方向]

/**
 * 移动端判断滑动方向：左右上下滑动
 */
function getAngle(dx, dy) {
    return Math.atan2(-dy,dx) * 180 / Math.PI;
};
function getDirection(startx,starty,endx,endy){
    var dx =endx-startx;
    var dy =endy-starty
    dy+=(getScrollTop()-scrollStartTop) // scroll will have influence on y,beacuse when scroll dy is always less then 10
    // console.log('dx ,dy:',dx,dy)
    var result = 0;
    if(Math.abs(dx)<2&&Math.abs(dy)<2){
        return result;
    }
    /* if(Math.abs(dy)<15){
        if(dx<-10){
            result=4
        }
        if(dx>10){
            result=2
        }
    } */
    var angle = getAngle(dx,dy);
    // if(angle >= -45 && angle < 45) { 
    if(angle >= -25 && angle < 25) { 
        result = 2; 
    // }else if (angle >= 45 && angle < 135) { 
    }else if (angle >= 25 && angle < 155) { 
        result = 1; 
    // }else if (angle >= -135 && angle < -45) { 
    }else if (angle >= -155 && angle < -25) { 
        result = 3; 
    // } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { 
    } else if ((angle >= 155 && angle <= 180) || (angle >= -180 && angle < -155)) { 
        result = 4; 
    } 

    /* if ( Math.abs(dx) > Math.abs(dy) && dx > 0 ) {
        // alert("left 2 right");
        result=2
    }
    else if ( Math.abs(dx) > Math.abs(dy) && dx < 0 ) {
        // alert("right 2 left");
        result=4
    }
    else if ( Math.abs(dy) > Math.abs(dx) && dy > 0) {
        // alert("top 2 bottom");
        result=3
    }
    else if ( Math.abs(dy) > Math.abs(dx) && dy < 0 ) {
        // alert("bottom 2 top");
        result=1
    } else{
        // alert("just touch");
        result=0
    } */
    // console.log('y x angle',dy,dx,angle,result);
    return result
}

mouseevent 鼠标位置

2020.6.16 星期二 11：45

鼠标事件

基础

clientX/clientY === x/y, pageX/pageY, screenX/screenY,
offsetX/offsetY, layerX/layerY

clientX/Y：相对于浏览器显示界面。
offsetX/Y: 相对于当前DOM/div
screenX/Y：相对于显示器。

ev.pageX = ev.clientX + 滚动距离

layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角

点击查看图片

六、Jquery 兼容写法
Jquery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

7. addEventListener IE兼容

8. 为什么不用try catch 处理

9. 不能用frag的innerHTML，需要用 fragment.appendChild(some element)
   using document.createDocumentFragment() and innerHTML to manipulate a DOM

   var frag = document.createDocumentFragment();
   frag.innerHTML = aWholeHTMLDocument;

10. 追加html，element.insertAdjacentHTML(position, text);
    position 是相对于 element 元素的位置，并且只能是以下的字符串之一：
    beforebegin：在 element 元素的前面。
    afterbegin：在 element 元素的第一个子节点前面。
    beforeend：在 element 元素的最后一个子节点后面。
    afterend：在 element 元素的后面。

text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

1. 原生手动触发click. dom.click() 或者document.createEvent();dispatchEvent(Event)
   JS中手动触发事件
   void initEvent(String eventTypeArg,boolean canBubbleArg,boolean cancelableArg) HTMLEvents,MouseEvents,UIEvents

   if (document.all){ //For Ie
        fireOnThis.click();
    }
    elseif (document.createEvent) {//FOR DOM2
    
        var ev = document.createEvent('HTMLEvents');
        ev.initEvent('click', true, true);
        fireOnThis.dispatchEvent(ev);
    }

2. 光标定位到最后位置

3. js获取伪类。最后通过给元素切换类名，不同的类名下，对应不同的伪类css样式.
   还有方法计算值，是利用元素的属性content: attr(data-value)
   js能获取，修改伪类元素:before或:after吗？

   sheet = style.sheet // 获取到stylesheet
   // Use addRule or insertRule to inject styles
   sheet.addRule('.red::before','color: green');
   sheet.insertRule('.red::before { color: green }', 0);

   // 用JavaScript获取伪元素(Pseudo-Element)属性的方法
   `javascript
   var color = window.getComputedStyle(
   document.querySelector(‘.element’), ‘:before’).getPropertyValue(‘color’)